<!--%import("popup.js")-->
<!--%import("popup.css")-->
<!--%import("../lang")-->

<div id="popHeader">
    <h3 class="xeAdmin">{$component_info->title} ver. {$component_info->version}</h3>
</div>

<form action="./" method="get" onSubmit="return false" id="fo">

    <div id="popBody">

        <div id="table_option" style="display:none">
            <input name="attr" type="radio" value="table" id="table_attribute_select" onclick="doSelectOption('table');"/> <label for="table_attribute_select">{$lang->table_attribute}</label>
            <input name="attr" type="radio" value="cell" id="cell_attribute_select" onclick="doSelectOption('cell');"/> <label for="cell_attribute_select">{$lang->cell_attribute}</label>
        </div>
        <div class="gap1"></div>

        <div id="table_attribute" style="display:none">
            <div class="" id="col_row_area" style="display:none" >
                <table cellspacing="0" class="rowTable">
                <col width="25%" />
                <col width="25%" />
                <col width="25%" />
                <col width="25%" />
                <tr>
                    <th scope="row"><div>{$lang->table_cols_count}</div></th>
                    <td><input type="text" class="inputTypeText" size="2" id="cols_count" value="2" /></td>
                    <th scope="row"><div>{$lang->table_rows_count}</div></th>
                    <td><input type="text" class="inputTypeText" size="2" id="rows_count" value="1" /></td>
                </tr>
                </table>
            </div>

            <table cellspacing="0" class="rowTable">
            <col width="25%" />
            <col />
            <tr>
                <th scope="row"><div>{$lang->table_width}</div></th>
                <td>
                    <input type="text" class="inputTypeText" size="3" id="width" value="100" />
                    <input type="radio" name="width_unit" id="width_unit_percent" checked="checked" /><label for="width_unit_percent">%</label>
                    <input type="radio" name="width_unit" id="width_unit_pixel" /><label for="width_unit_pixel">px</label>
                </td>
            </tr>
            </table>

        </div>

        <table cellspacing="0" class="rowTable">
        <col width="25%" />
        <col width="25%" />
        <col width="25%" />
        <col width="25%" />
        <tr>
            <th scope="row"><div>{$lang->table_cellspacing}</div></th>
            <td><input type="text" class="inputTypeText" size="2" id="cellspacing" value="0" />px</td>
            <th scope="row"><div>{$lang->table_cellpadding}</div></th>
            <td><input type="text" class="inputTypeText" size="2" id="cellpadding" value="1" />px</td>
        </tr>
        <tr>
            <th scope="row"><div>{$lang->table_border}</div></th>
            <td><input type="text" class="inputTypeText" size="2" id="border" value="1" />px</td>
            <th scope="row"><div>{$lang->table_inner_border}</div></th>
            <td><input type="text" class="inputTypeText" size="2" id="inner_border" value="0" />px</td>
        </tr>
        </table>

        <div id="cell_attribute" style="display:none">
            <table cellspacing="0" class="adminTable">
            <col width="25%" />
            <col width="25%" />
            <col width="25%" />
            <col width="25%" />
            <tr>
                <th scope="row"><div>{$lang->cell_width}</div></th>
                <td>
                    <input type="text" class="inputTypeText" size="3" id="cell_width" value="0" />
                    <input type="radio" name="cell_width_unit" id="cell_width_unit_percent" checked="checked" /><label for="cell_width_unit_percent">%</label>
                    <input type="radio" name="cell_width_unit" id="cell_width_unit_pixel" /><label for="cell_width_unit_pixel">px</label>
                </td>
                <th scope="row"><div>{$lang->cell_height}</div></th>
                <td><input type="text" class="inputTypeText" size="3" id="cell_height" value="0" />px</td>
            </tr>
            </table>
        </div>

        <div id="border_color_area" style="display:none">
            <table cellspacing="0" class="adminTable">
            <col width="25%" />
            <col />
            <tr>
                <th scope="row"><div>{$lang->table_border_color}</div></th>
                <td>
                    <div class="editor_color_box">
                        <script type="text/javascript">
                            printColor("border", "{$tpl_path}/images/blank.gif");
                        </script>
                    </div>

                    <ul class="buttonLeft">
                        <li><img src="./images/border_solid.gif" alt="blank" class="border_preview_color" id="border_preview_color" /></li>
                        <li>#<input type="text" id="border_color_input" size="6" maxlength="6" class="inputTypeText" value="000000" onkeyup="manual_select_color('border',this)"/></li>
                    </ul>
                </td>
            </tr>
            </table>
        </div>

        <div id="bg_color_area" style="display:none">
            <table cellspacing="0" class="adminTable">
            <col width="25%" />
            <col />
            <tr>
                <th scope="row"><div>{$lang->table_bg_color}</div></th>
                <td>
                    <div class="editor_color_box">
                        <script type="text/javascript">
                            printColor("bg", "{$tpl_path}/images/blank.gif");
                        </script>
                    </div>

                    <ul class="buttonLeft">
                        <li><img src="./images/blank.gif" alt="blank" class="bg_preview_color" id="bg_preview_color" /></li>
                        <li>#<input type="text" id="bg_color_input" size="6" maxlength="6" class="inputTypeText" value="FFFFFF" onkeyup="manual_select_color('bg',this)"/></li>
                    </ul>
                </td>
            </tr>
            </table>
        </div>
    </div>

    <div id="popFooter">
        <a href="#" onclick="insertTable()" class="button black strong"><span>{$lang->cmd_insert}</span></a>
        <a href="#" onclick="winopen('./?module=editor&amp;act=dispEditorComponentInfo&amp;component_name={$component_info->component_name}','ComponentInfo','left=10,top=10,width=10,height=10,resizable=no,scrollbars=no,toolbars=no');return false;" class="button"><span>{$lang->about_component}</span></a>
    </div>
</form>
